import React from 'react';

import {Input, Button, Icon, Select} from 'antd';
import QiniuUploadimage from '../QiniuUploadimage';

import styles from './index.less';

export default class GentleidPublishEx extends React.Component{

  state = {
    value:[]
  }

  onValueChange(e){
    var v = e.target.value;

    var validate = this.props.validate;
    this.props.emitter.emit('onValueChange', this.props.name, v);
    this.setState({
      value:v
    });
  }

  iemi = null;

  reset(){
    this.setState({
      value:JSON.parse(this.props.defaultValue)
    })
  }

  componentWillReceiveProps(n){
    this.setState({
      value:JSON.parse(n.defaultValue)
    })
  }

  componentWillMount(){
    this.reset();

    this.iemi = this.props.emitter.addListener('onReset', ()=>{this.reset()});
    this.props.emitter.emit('onValueChange', this.props.name, JSON.parse(this.props.defaultValue));
  }

  componentWillUnmount(){
    this.iemi.remove();
  }

  deleteSection(id){
    var value = [];
    this.state.value.map(v=>{
      if (v.id !== id){
        value.push(v);
      }
    });
    this.setState({
      value:value
    })
    this.props.emitter.emit('onValueChange', this.props.name, value);
  }

  addSection(type){
    var newid = 1;
    if (this.state.value[this.state.value.length-1]){
      newid = this.state.value[this.state.value.length-1].id + 1;
    }
    var newValue = this.state.value.concat([
      {
        id:newid,
        type:type,
        content:""
      }
    ])
    this.setState({
      value:newValue
    })
    this.props.emitter.emit('onValueChange', this.props.name, newValue);
  }

  changeSection(id, content){
    var value = this.state.value;
    for(var i=0;i<value.length;i++){
      if (value[i].id === id){
        value[i].content = content;
      }
    }
    this.setState({
      value:value
    });
    this.props.emitter.emit('onValueChange', this.props.name, value);
  }

  render(){
    return <div>
      {
        this.state.value.map(v=>{
          if (v.type === 'image'){
            return <div key = {this.props.record.id + "_" + this.props.name + "_" + v.id}>
              <Icon type = "delete" onClick = {(e)=>{
                this.deleteSection(v.id);
              }}/> 
              <QiniuUploadimage name = {this.props.record.id + "_" + this.props.name+"_"+v.id} hash = {v.content} defaultHash = {v.content} onFetchHash = {(hash) => {
                this.changeSection(v.id, hash);
              }}/>
            </div>
          }else if (v.type === 'text'){
            return <div key = {this.props.record.id + "_" + this.props.name + "_" + v.id}>
              <Icon type = "delete" onClick = {(e)=>{
                this.deleteSection(v.id);
              }}/>
              <Input type = 'textarea' value = {v.content} autosize defaultValue = {v.content} onChange = {(e) => {
                this.changeSection(v.id, e.target.value);
              }}/>
            </div>
          }
        })
      }
      {this.props.textonly?<div/>:<Button onClick = {(e)=>{this.addSection("image")}}>添加图片</Button>}
      {this.props.imgonly?<div/>:<Button onClick = {(e)=>{this.addSection("text")}}>添加文字</Button>}
    </div>
  }
}